<template>
  <div>
    <h1>app.vue</h1>
    <p>我是app里的p</p>
    <h3>我是app.vue里的h3</h3>

    <son1 />

    <son2 />
  </div>
</template>

<script>
// 导入
import son1 from './components/son1'
import son2 from './components/son2'

export default {

  // 注册组件
  components: {
    son1, 
    son2
  }
}
</script>

<style scoped>

/* p标签这个样式只给自己用 */
p {
  font-style: italic;
}

/* h3这个样式能给自己的子组件用 */
/* 用到深度作用选择器 */
/* 效果：能把某个样式穿透给子组件用 */
/* 
  深度作用选择器有三个写法：
    >>>： vscode不认识，会报错（不是真的报错）
    /deep/ vscode默认页不认识，会报错（不是真的报错）
    ::v-deep （推荐用这个）
*/
::v-deep h3 {

  color: blue;
}

</style>